<template>
  <div>
    <a-modal :title="title" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" :mask-closable="false">
      <div>
        <div class="top">
          <div>
            <span class="label-text">店铺：</span>
            <span>{{ detailInfo.shopName }}</span>
          </div>
          <div class="ml10">
            <span class="label-text">订单来源：</span>
            <span>{{ detailInfo.source == 'OFFLINE' ? '手动创建' : 'API接口' }}</span>
          </div>
          <div class="ml10">
            <span class="label-text">买家：</span>
            <span>{{ detailInfo.buyerName }}</span>
          </div>
          <div class="ml10">
            <span class="label-text">收件人：</span>
            <span>{{ $extract(detailInfo, 'address.userName') }}</span>
          </div>
          <div class="ml10">
            <span class="label-text"> 国家：</span>
            <span>{{ $extract(detailInfo, 'address.country') }}{{ $extract(detailInfo, 'address.countryCode') ? `(${$extract(detailInfo, 'address.countryCode')})` : '' }}</span>
          </div>
        </div>
        <div class="bottom mt10">
          <a-table class="table-two-line" v-model:selected-keys="ids" size="mini" row-key="id" :data="detailInfo.itemList" :row-selection="{ type: 'checkbox', showCheckedAll: true }" :pagination="false" :scroll="{ y: '300px' }">
            <template #columns>
              <a-table-column title="序号" #cell="{ record, rowIndex }" :width="40">{{ rowIndex + 1 }}</a-table-column>
              <a-table-column title="图片" #cell="{ record, rowIndex }" :width="60">
                <ImgPopover :src="getImage(record)">
                  <template #con>
                    <img width="40" height="40" :src="getImage(record)" />
                  </template>
                </ImgPopover>
              </a-table-column>
              <a-table-column title="MSKU/ASIN" #cell="{ record, rowIndex }" :width="140">
                <TextHidden class="highlight" position="top" :rows="1" :rowsWidth="140">{{ record.msku ? record.msku : '--' }}</TextHidden>
                <TextHidden class="highlight" position="top" :rows="1" :rowsWidth="140">{{ record.asin ? record.asin : '--' }}</TextHidden>
              </a-table-column>
              <a-table-column title="SKU/类目" #cell="{ record, rowIndex }" :width="120">
                <TextHidden class="highlight" position="top" :rows="1" :rowsWidth="140">{{ record.productSku ? record.productSku : '--' }}</TextHidden>
                <TextHidden class="highlight" position="top" :rows="1" :rowsWidth="140">{{ record.productCategoryName ? record.productCategoryName : '--' }}</TextHidden>
              </a-table-column>
              <a-table-column title="订购数量" #cell="{ record, rowIndex }" :width="60">{{ record.qtyOrdered }}</a-table-column>
              <a-table-column title="售价/优惠" #cell="{ record, rowIndex }" :width="120">
                <div>{{ currencyObj[record.currency] }}{{ record.amtSell }}</div>
                <div>{{ currencyObj[record.currency] }}{{ record.amtDiscount }}</div>
              </a-table-column>
            </template>
          </a-table>
        </div>
      </div>
      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" class="ml10" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getOrderDetail, cancelOrder } from '@/api/order'
  import { currencySymbol } from '@/utils/globalData'
  export default defineComponent({
    props: ['selectRow'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        loading: false,
        detailInfo: {},
        ids: [],
        currencyObj: currencySymbol,
      })

      const title = computed(() => {
        return `取消订单(${data.detailInfo.platformOrderNumber})`
      })

      const open = () => {
        getDetail()
        console.log(props.selectRow)
      }
      const handleOk = async () => {
        if (!data.ids[0]) {
          return Message.error('请选择要取消的数据')
        }
        let params = {
          orderId: data.detailInfo.id,
          orderItemIdList: data.ids,
        }
        data.loading = true
        const res = await cancelOrder(params)
        if (res) {
          Message.success('取消成功')
          data.ids = []
          visible.value = false
          emit('save')
        }
        data.loading = false
      }
      const handleCancel = () => {
        data.ids = []
        visible.value = false
      }

      const getDetail = async () => {
        const res = await getOrderDetail({ id: props.selectRow[0].id })
        data.detailInfo = res?.data
      }

      const getImage = (item: any) => {
        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0]
        } else {
          return item.productPic
        }
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        title,
        getImage,
      }
    },
  })
</script>

<style lang="less" scoped>
  .top {
    display: flex;
  }
</style>
